<template>
  <div class="articledetails">
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="title">
      {{ info.title }}
    </div>
    <div class="user">
      <div class="info">
        <img :src="info.aut_photo" alt="" />
        <div class="names">
          <div class="name">{{ info.aut_name }}</div>
          <div class="time">{{ info.pubdate }}</div>
        </div>
      </div>
      <div class="attention" v-if="info.is_followed" @click="delattent">
        已关注
      </div>
      <div class="attention" v-else @click="joinattent">
        +关注
      </div>
    </div>
    <div class="content" v-html="info.content"></div>
    <div class="like" v-if="info.recomments">
      <div class="title">猜你喜欢</div>
      <ul v-if="info.recomments.length != 0">
        <li v-for="(item, index) in info.recomments" :key="index">
          {{ item.title }}
        </li>
      </ul>
      <div class="nodata" v-else>暂无数据</div>
    </div>
    <div class="think">
      <div class="love" :class="{ red: info.attitude === 1 }" @click="likes">
        <van-icon name="good-job-o" size="12" />
        点赞
      </div>
      <div class="unlove" @click="unlike">
        <van-icon name="delete-o" size="12" />不喜欢
      </div>
    </div>
    <div class="link">
      <img
        src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2187934261,1693271661&fm=26&gp=0.jpg"
        alt=""
      />
      <div class="text">前端与移动开发-课程升级V6.0 高薪技术全覆盖</div>
      <div class="text">学前端 选择-传智播客</div>
    </div>

    <!-- 评论 -->
    <div class="comment">
      <div
        class="list"
        v-for="(item, index) in comm"
        :key="index"
        @click="anscomm(item.aut_id)"
      >
        <img :src="item.aut_photo" alt="" />
        <div class="info">
          <div class="top">
            <div class="name">{{ item.aut_name }}</div>
            <div class="thumbs">
              <van-icon name="good-job-o" /> {{ item.like_count }}
            </div>
          </div>
          <div class="middle">{{ item.content }}</div>
          <div class="bottom">
            <div class="time">{{ item.pubdate }}</div>
            ·
            <div class="reply" @click.stop="lookCoom">
              {{ item.reply_count }} 回复
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 写评论 -->
    <div class="write">
      <div class="field" @click="writecomm">写评论</div>
      <div class="icon">
        <span class="iconfont icon-pinglun"></span>
        <span
          class="iconfont icon-xingxing"
          :class="{ red: info.is_collected }"
          @click="collections"
        ></span>
        <span class="iconfont icon-fenxiang" @click="showShare = true"></span>
      </div>
    </div>
    <van-popup
      v-model="popupshow"
      position="bottom"
      :style="{ height: '200px' }"
      round
      class="popup"
      ><van-field
        v-model="commvalue"
        rows="5"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入评论"
        show-word-limit
      />
      <van-button type="info" size="small" @click="submit"
        >评论</van-button
      ></van-popup
    >
    <!-- 分享面板 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <!-- 看评论 -->
    <van-popup
      v-model="lookcoom"
      position="bottom"
      :style="{ height: '300px' }"
    />
  </div>
</template>

<script>
import {
  articles,
  comments,
  writeComments,
  delFollowings,
  articleLikings,
  unarticleLikings,
  articleDislikes,
  userFollowings,
  articleCollections,
  DELarticleCollections
} from '../../api/articledetails'
export default {
  name: 'articledetails',
  data () {
    return {
      id: '',
      info: '',
      comm: '',
      popupshow: false, // 是否显示评论层
      commvalue: '', // 评论内容
      showShare: false, // 分享面板
      commentid: '', // 评论id
      lookcoom: false, // 看评论弹出框
      //  分享内容
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  created () {
    this.id = this.$route.query.art_id
  },
  methods: {
    // 返回接口
    onClickLeft () {
      this.$router.push('/home/index')
    },
    // 收藏/取消收藏
    async collections () {
      if (this.info.is_collected) {
        const res = await DELarticleCollections(this.id)
        console.log(res)
        if (res.status === 204) {
          this.$toast({
            message: '取消收藏',
            position: 'bottom'
          })
          this.getInfo()
        }
      } else {
        const res = await articleCollections({ target: this.id })
        if (res.status === 201) {
          this.$toast({
            message: '收藏成功',
            position: 'bottom'
          })
          this.getInfo()
        } else {
          this.$toast({
            message: '收藏失败',
            position: 'bottom'
          })
        }
      }
    },
    // 看评论
    lookCoom () {
      this.lookcoom = true
    },
    // 分享面板
    onSelect (option) {
      this.$toast(option.name)
      this.showShare = false
    },
    async getInfo () {
      const res = await articles(this.id)
      this.info = res.data.data
      // console.log(res)
    },
    async getcomm () {
      const res = await comments({
        type: 'a',
        source: this.id
      })
      // console.log(res)
      this.comm = res.data.data.results
    },
    // 写评论
    writecomm () {
      this.popupshow = true
    },
    // 发表评论
    async submit () {
      if (this.commentid) {
        // 回复评论
        const res = await writeComments({
          target: this.commentid,
          content: this.commvalue,
          art_id: this.id
        })
        console.log(res)
      } else {
        // 评论
        const res = await writeComments({
          target: this.id,
          content: this.commvalue
        })
        if (res.status === 201) {
          this.$toast({
            message: '评论成功',
            position: 'bottom'
          })
        } else {
          this.$toast({
            message: '评论失败',
            position: 'bottom'
          })
        }
      }
      this.getcomm()
      this.commentid = ''
      this.commvalue = ''
      this.popupshow = false
    },
    // 取消关注
    async delattent () {
      const res = await delFollowings(this.info.aut_id)
      if (res.status === 204) {
        this.$toast({
          message: '已取消关注',
          position: 'top'
        })
      }
      this.getInfo()
    },
    // 关注用户
    async joinattent () {
      const res = await userFollowings({ target: this.info.aut_id })
      if (res.status === 201) {
        this.$toast({
          message: '已关注',
          position: 'top'
        })
        this.getInfo()
      }
    },
    // 点赞文章
    async likes () {
      if (this.info.attitude !== 1) {
        const res = await articleLikings({
          target: this.id
        })
        if (res.status === 201) {
          this.getInfo()
          this.$toast({
            message: '点赞成功',
            position: 'top'
          })
        } else {
          this.$toast({
            message: '点赞失败',
            position: 'top'
          })
        }
      } else {
        const res2 = await unarticleLikings(this.id)
        console.log(res2)
        if (res2.status === 204) {
          this.getInfo()
          this.$toast({
            message: '已取消点赞',
            position: 'top'
          })
        }
      }
    },
    // 不喜欢
    unlike () {
      this.$dialog
        .alert({
          message: '确认将此文章添加到不喜欢吗?',
          showCancelButton: true
        })
        .then(async () => {
          // on confirm
          const res = await articleDislikes({
            target: this.id
          })
          if (res.status === 201) {
            this.$toast({
              message: '已添加至不喜欢',
              position: 'top'
            })
          }
          // console.log(res)
        })
        .catch(() => {
          // on cancel
        })
    },
    // 回复评论
    async anscomm (commid) {
      this.popupshow = true
      this.commentid = commid
    }
  },
  mounted () {
    this.getInfo()
    this.getcomm()
  }
}
</script>

<style lang="less" scoped>
.articledetails {
  padding: 0 @p12;
  padding-bottom: 50px;
  /deep/.van-nav-bar__left,
  /deep/.van-nav-bar__right {
    padding: 0;
  }
  .title {
    padding: 25px 0;
    font-size: 20px;
    font-weight: 800;
  }
  .user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .info {
      display: flex;
      align-items: center;

      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .names {
        .name {
          font-size: 12px;
        }
        .time {
          font-size: 12px;
          color: #b4b4b4;
        }
      }
    }
    .attention {
      width: 85px;
      height: 30px;
      background-color: #3296fa;
      border-radius: 15px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      font-size: 14px;
    }
  }

  /deep/.content {
    font-size: 15px;
    margin: 30px 0;
    line-height: 30px;
    width: 100%;
    table-layout: fixed;
    word-wrap: break-all;
    word-break: normal;
    overflow: hidden;
    /deep/img {
      width: 100%;
    }
  }
  .like {
    .title {
      font-size: 15px;
      font-weight: 800;
    }
    .nodata {
      font-size: 20px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        line-height: 32px;
        font-size: 15px;
        color: #666666;
        padding-left: 10px;
      }
    }
  }

  .think {
    display: flex;
    justify-content: center;
    font-size: 13px;
    margin-top: 23px;
    .red {
      color: red;
      border: 1px solid red !important;
    }
    .love,
    .unlove {
      padding: 8px 16px;
      border: 1px solid #eeeeee;
      border-radius: 15px;
      margin: 0 8px;
    }
    .unlove {
      border: 1px solid #e22829;
      color: #e22829;
    }
  }
  .link {
    padding: 12px 14px;
    border: 1px solid #e8e8e8;
    margin-top: 25px;
    margin-bottom: 22px;
    img {
      width: 100%;
    }
    .text {
      font-size: 13px;
      line-height: 18px;
    }
  }

  .comment {
    overflow: hidden;
    .list {
      display: flex;
      margin-top: 32px;

      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-right: 14px;
      }
      .info {
        width: 100%;

        .top {
          display: flex;

          justify-content: space-between;
          .name {
            font-size: 13px;
            color: #406599;
          }
          .thumbs {
            font-size: 12px;
            color: #1f1f1f;
          }
        }
        .middle {
          font-size: 15px;
          padding: 15px 14px 15px 0;
          width: 100%;
        }
        .bottom {
          display: flex;
          align-items: center;
          font-size: 12px;
          .reply {
            padding: 6px 14px;
            background-color: #f4f5f6;
            border-radius: 15px;
            margin-left: 12px;
          }
        }
      }
    }
  }

  .write {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    background-color: #fff;
    align-items: center;
    padding: 5px 15px;
    .red {
      color: red;
    }
    .field {
      font-size: 15px;
      color: #a7a7a7;
      padding: 9px 13px;
      border: 1px solid #a7a7a7;
      border-radius: 18px;
      flex: 3;
    }
    .icon {
      flex: 2;
      display: flex;
      align-items: center;
      justify-content: space-around;
      span {
        font-size: 25px;
        &:nth-child(1) {
          font-size: 20px;
        }
      }
    }
  }
  .popup {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
